<template>
<div class="classify-index">
  <!-- 轮播图 -->
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="(item) in imgBox" :key="item.index">
      <img :src="item.url" width="100%" height="100%">
    </el-carousel-item>
  </el-carousel>
  <!-- 目录 -->
  <el-row type="flex" justify="space-around">
    <el-card class="cardOne" @click.native="toList">
      <i class="el-icon-office-building">
        <h1 class="menu-title">全部分类</h1>
        <p class="menu-contain">优质生活 重新出发</p>
      </i>
    </el-card>
    <el-card class="cardTwo" @click.native="toListByid">
       <i class="el-icon-office-building">
        <h1 class="menu-title">公寓</h1>
        <p class="menu-contain">真实房源 假一赔十</p>
      </i>
    </el-card>
    <el-card class="cardThree">
       <i class="el-icon-office-building">
        <h1 class="menu-title">写字楼</h1>
        <p class="menu-contain">舒适省心 租又何妨</p>
      </i>
    </el-card>
    <el-card class="cardFour">
       <i class="el-icon-office-building">
        <h1 class="menu-title">卖方</h1>
        <p class="menu-contain">足不出户 在线委托</p>
      </i>
    </el-card>
  </el-row>
</div>
</template>

<script>
// import { arceList } from '@/api/arcelist'
export default {
  data () {
    return {
      // 定义跑马灯图片路径
      imgBox: [
        { url: require('../../assets/images/1.jpg') },
        { url: require('../../assets/images/2.jpg') },
        { url: require('../../assets/images/3.jpg') },
        { url: require('../../assets/images/4.jpg') },
        { url: require('../../assets/images/5.jpg') },
        { url: require('../../assets/images/desktop_1.jpg') },
        { url: require('../../assets/images/desktop_3.jpg') },
        { url: require('../../assets/images/desktop_4.jpg') },
        { url: require('../../assets/images/desktop_5.jpg') }
      ]
    }
  },
  methods: {
    toList () {
      this.$router.push('/arceList')
    },
    toListByid () {
      this.$store.commit('arceList/Save_id', 2)
      this.$router.push('/arceList')
    }
  }
}
</script>

<style scoped lang="scss">
.classify-index {
  margin: 0 auto;
  background-color: #f1f3f5;
  height: calc(100vh - 60px) ;

  .cardOne,
  .cardTwo,
  .cardThree,
  .cardFour{
    margin-top: 50px;
    width: 300px;
    height: 300px;
    background-color: #fff;
    text-align: center;
    line-height: 300px;
    cursor: pointer;
    .el-icon-office-building{
      font-size: 30px;
      .menu-title{
        font-size: 20px;
        margin-top: 10px;
      }
      .menu-contain{
        font-size: 16px;
        margin-top: 10px;
      }
    }
  }
}
</style>
